{% extends "admin/base.html" %}


{% block link %}
    <link rel="stylesheet" href="/static/css/dropzone.min.css" type="text/css" />
{% endblock %}


{% block content_main %}
<div class="layui-row">
    <div class="layui-col-md8">
        <div class="layui-row">
          <blockquote class="layui-elem-quote">单选题</blockquote>
          <form class="layui-form">
              <div class='layui-form-item'>
                <label class='layui-form-label'>问题</label>
                <div class='layui-input-block'>
                  <textarea type='text' name='question' id="single_choice_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>A</label>
                <div class='layui-input-block'>
                  <input type='text' name='a' id="single_choice_a" placeholder='请输入 A 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>B</label>
                <div class='layui-input-block'>
                  <input type='text' name='b' id="single_choice_b" placeholder='请输入 B 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>C</label>
                <div class='layui-input-block'>
                  <input type='text' name='c' id="single_choice_c" placeholder='请输入 C 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>D</label>
                <div class='layui-input-block'>
                  <input type='text' name='d' id="single_choice_d" placeholder='请输入 D 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>正确答案</label>
                <div class='layui-input-block'>
                  <select name='correct' id="single_choice_correct">
                    <option value='a' selected="">A</option>
                    <option value='b'>B</option>
                    <option value='c'>C</option>
                    <option value='d'>D</option>
                  </select>
                </div>
              </div>
                <div class='layui-form-item'>
                <div class='layui-input-block'>
                  <button type='button' onclick="add_single_choice_question();" class='layui-btn'>添加单选题</button>
                </div>
              </div>
          </form>
        </div>
        <hr style="background-color: green; height: 10px;"/>
        <div class="layui-row">
          <blockquote class="layui-elem-quote">多选题</blockquote>
          <form class="layui-form" action="/question_bank/add_multiple_choice_question_bank" method="post">
              <input value="{{ id_question_bank }}" name="id_question_bank" hidden>
              <div class='layui-form-item'>
                <label class='layui-form-label'>问题</label>
                <div class='layui-input-block'>
                  <textarea type='text' name='question' id="single_choice_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>A</label>
                <div class='layui-input-block'>
                  <input type='text' name='a' id="single_choice_a" placeholder='请输入 A 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>B</label>
                <div class='layui-input-block'>
                  <input type='text' name='b' id="single_choice_b" placeholder='请输入 B 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>C</label>
                <div class='layui-input-block'>
                  <input type='text' name='c' id="single_choice_c" placeholder='请输入 C 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>D</label>
                <div class='layui-input-block'>
                  <input type='text' name='d' id="single_choice_d" placeholder='请输入 D 答案' autocomplete="off" class='layui-input'>
                </div>
              </div>
              <div class='layui-form-item'>
                <label class='layui-form-label'>正确答案</label>
                <div class='layui-input-block'>
                  <input value="a" type="checkbox" name="checkbox_a" title="A">
                  <input value="b" type="checkbox" name="checkbox_b" title="B">
                  <input value="c" type="checkbox" name="checkbox_c" title="C">
                  <input value="d" type="checkbox" name="checkbox_d" title="D">
                </div>
              </div>
                <div class='layui-form-item'>
                <div class='layui-input-block'>
                  <button type='submit' class='layui-btn'>添加多选题</button>
                </div>
              </div>
          </form>
        </div>
        <hr style="background-color: green; height: 10px;"/>
        <div class="layui-row">
            <blockquote class="layui-elem-quote">判断题</blockquote>
            <form class="layui-form">
              <div class='layui-form-item'>
                <label class='layui-form-label'>问题</label>
                <div class='layui-input-block'>
                    <textarea type='text' name='question' id="judgmental_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
                </div>
              </div>
                <div class='layui-form-item'>
                    <label class='layui-form-label'>正确答案</label>
                    <div class='layui-input-block'>
                      <select name='answer' id="judgmental_answer">
                        <option value='1' selected="">对</option>
                        <option value='0'>错</option>
                      </select>
                    </div>
                </div>
              <div class='layui-form-item'>
                <div class='layui-input-block'>
                  <button type='button' class='layui-btn' onclick="add_judgmental_question();">添加判断题</button>
                </div>
              </div>
            </form>
        </div>
        <hr style="background-color: green; height: 10px;"/>
        <blockquote class="layui-elem-quote">简答题</blockquote>
        <form class="layui-form">
          <div class='layui-form-item'>
            <label class='layui-form-label'>问题</label>
            <div class='layui-input-block'>
              <textarea type='text' name='question' id="short_answer_question" placeholder='请输入问题' autocomplete="off" class='layui-textarea'></textarea>
            </div>
          </div>
          <div class='layui-form-item'>
            <label class='layui-form-label'>回答</label>
            <div class='layui-input-block'>
              <textarea name="answer" id="short_answer_answer" placeholder="请输入回答" autocomplete="off" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class='layui-form-item'>
            <div class='layui-input-block'>
              <button type='button' onclick="add_short_answer_question();" class='layui-btn'>添加简答题</button>
            </div>
          </div>
        </form>
        <hr style="background-color: green; height: 10px;"/>
        <blockquote class="layui-elem-quote">图片题</blockquote>
        <form method="post" action="/question_bank/add_picture_question_bank" enctype="multipart/form-data" class="layui-form">
          <input name="id_question_bank" value="{{ id_question_bank }}" hidden>
          <div class='layui-form-item'>
            <label class='layui-form-label'>问题</label>
            <div class='layui-input-block'>
              <input type='file' name='question' class='layui-input'>
            </div>
          </div>
          <div class='layui-form-item'>
            <label class='layui-form-label'>回答</label>
            <div class='layui-input-block'>
                <textarea name="answer" placeholder="请输入答案" autocomplete="off" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class='layui-form-item'>
            <div class='layui-input-block'>
              <button type='submit' class='layui-btn'>添加图片问题</button>
            </div>
          </div>
        </form>
        <p>请点击或拖拽文件到下方完成批量添加图片问题，格式：任何字符-题目类型标识符-题目答案.jpg，如：1-0-a.jpg，则识别为单选题，且答案设置为a。'任何字符'可以是除'-'之外的任何字符，题目类型标识符为：0，1，2三个，0代表选择题，1代表判断题，2代表简单题，题目答案为除'-'外的任何字符，对于选择题只能是a，b，c，d四个字符,而对于判断题只能是0，1，0：错误，1：正确</p>
        <form action="/question_bank/batch_add_picture_question_bank" class="dropzone" id="my-great-dropzone">
            <input name="id_question_bank" value="{{ id_question_bank }}" hidden>
        </form>
        <hr/>
    </div>
    <div class="layui-col-md4">
        <blockquote class="layui-elem-quote">题库题数量</blockquote>
        <p>单选题: {{ single_choice|length }}</p>
        <p>判断题: {{ judgmental|length }}</p>
        <p>简单题: {{ short_answer|length }}</p>
        <p>图片题: {{ picture_question|length }}</p>
    </div>
</div>
{% endblock %}


{% block script %}
<script src="/static/js/dropzone.min.js"></script>
<script>
    var id_question_bank = window.location.href.split("?")[1].split("=")[1]
    function add_single_choice_question() {
        $.post(
            "/question_bank/add_single_choice_question_bank",
            {
                "id_question_bank": id_question_bank,
                "question": document.getElementById("single_choice_question").value,
                "a": document.getElementById("single_choice_a").value,
                "b": document.getElementById("single_choice_b").value,
                "c": document.getElementById("single_choice_c").value,
                "d": document.getElementById("single_choice_d").value,
                "answer": document.getElementById("single_choice_correct").value
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
    function add_judgmental_question() {
        $.post(
            "/question_bank/add_judgmental_question_bank",
            {
                "id_question_bank": id_question_bank,
                "question": document.getElementById("judgmental_question").value,
                "answer": document.getElementById("judgmental_answer").value
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
    function add_short_answer_question() {
        $.post(
            "/question_bank/add_short_answer_question_bank",
            {
                "question": document.getElementById("short_answer_question").value,
                "answer": document.getElementById("short_answer_answer").value,
                "id_question_bank": id_question_bank
            },
            function (data,state) {
                if(data != "success"){
                    alert("题目格式错误");
                }
                else{
                    window.location.reload();
                }
            }
        );
    }
</script>
<script>
  Dropzone.options.myGreatDropzone = { // camelized version of the `id`
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 10, // MB
    accept: function(file, done) {
        //console.log(file.size);
        //document.getElementById("my-great-dropzone").action = document.getElementById("my-great-dropzone").action+"&size="+file.size;
        //console.log(document.getElementById("my-great-dropzone"));
        done();
        /*
      if (file.name == "justinbieber.jpg") {
        done("Naha, you don't.");
      }
      else { done(); }
         */
    }
  };
</script>
{% endblock %}
